<template>
    <div class="integral">
        <x-header v-show="!isWeChar" class="page_head">
            <div slot="default" class="common__header--title">{{pageTitle}}</div>
            <div @click="goBack" slot="overwrite-left"><img slot="icon" src="~assets/x3/ico/goback2.png" class="go-back"></div>
        </x-header>
        <div class="integral_head">
            <div class="head_left" @click="goList('')">
                <div class="title">宝豆余额</div>
                <div>
                    <span>{{(integral.integralData.myscore.effctiveScore + integral.integralData.myscore.noeffctiveScore) | filter_moeny}}</span>
                    <img alt="" src="~assets/x3/ico/row_lists.png" width="16">
                </div>
            </div>
            <div class="head_right">
                <div class="row title">待生效宝豆</div>
                <div class="row">
                    <div class="money">{{integral.integralData.myscore.noeffctiveScore | filter_moeny}}</div>
                    <div class="rightTag"> <img alt="" src="~assets/x3/ico/problem.png" width="20" @click="showDesc"></div>
                </div>
                <div class="row">已生效宝豆</div>
                <div class="row">
                    <div class="money">{{integral.integralData.myscore.effctiveScore | filter_moeny}}</div>
                    <!-- v-show="integral.integralData.myscore.effctiveScore > 0" -->
                    <div v-show="false" class="btn" @click="exChange">提现</div>
                </div>
            </div>
        </div>
        <div v-if="typeof(integral.integralData.expire[0])!='undefined' && integral.integralData.expire[0][0] != 0" class="integral_baodouNum">
            <div class="left">{{integral.integralData.expire[0][1] | filter_date}} 到期宝豆</div>
            <div class="right">{{integral.integralData.expire[0][0] | filter_num}} 个</div>
        </div>
        <div v-else class="integral_baodouNum">
            <div class="left">没有到期的宝豆</div>
        </div>
        <grid :cols="3" class="integral_statistics">
            <grid-item @click.native="goList('')">
                <h3>{{integral.integralData.myscore.sumScore | filter_moeny}}</h3>
                <div>累计获得宝豆</div>
            </grid-item>
            <grid-item @click.native="goList('月')">
                <h3>{{integral.integralData.mouthSum | filter_moeny}}</h3>
                <div>近一月奖励</div>
            </grid-item>
            <grid-item @click.native="goList('周')">
                <h3>{{integral.integralData.weekSum | filter_moeny}}</h3>
                <div>近一周奖励</div>
            </grid-item>
        </grid>

        <div class="integral_chartTitle">近30日奖励曲线</div>
        <div class="integral_chart">
            <div id="container" style="max-width:800px;max-height:400px;padding: 0px 15px 0px 10px;"></div>
        </div>
    </div>
</template>

<script>
import DateUtil from "src/common/util/dateUtil";
import { RouteUrl, Mutations } from "src/common/const";
import { XHeader, XInput, XButton, Scroller, Grid, GridItem } from "vux";
import { mapState } from "vuex";
//highcharts的引入
import Highcharts from 'highcharts';

export default {
    components: { XHeader, XInput, XButton, Scroller, Grid, GridItem },
    computed: mapState(["user", "isWeChar", "integral"]),
    filters: {
        //格式化金额
        filter_moeny(val) {
            val = val + "";
            if (val.length > 3) {
                val = val.replace(/\B(?=(?:\d{3})+\b)/g, ',');
            }
            return val;
        },
        //格式化数字
        filter_num(val) {
            if (!isNaN(parseInt(val)) && val < 0) {
                val = 0 - val;//.toFixed(2);//四舍五入保留2位
            }
            val = val + "";
            if (val.length > 3) {
                val = val.replace(/\B(?=(?:\d{3})+\b)/g, ',');
            }
            return val;
        },
        //格式化日期字符串
        filter_date(val) {
            val = val + "";
            if (val.length > 10) {
                val = val.substring(0, 10);
            }
            return val;
        },
    },
    data() {
        return {
            pageTitle: "我的宝豆",
            //图表数据对象
            chartsData: {
                chart: {
                    width: window.innerWidth - 20,
                    height: 250,
                },
                title: {
                    text: ''//图表标题
                },
                subtitle: {
                    text: ''//标题描述
                },
                legend: {
                    layout: 'vertical',//"horizontal" 或 "vertical" 即水平布局和垂直布局 默认是：horizontal.
                    align: 'right',//设定图例在图表区中的水平对齐方式，合法值有left，center 和 right。
                    verticalAlign: 'middle'//设定图例在图表区中的垂直对齐方式，合法值有 top，middle 和 bottom。垂直位置可以通过 y 选项做进一步设定。
                },

                animation: {
                    duration: 500,//设置所有图表更新的整体动画。时间
                    easing: 'easeOutBounce'//类型
                },
                exporting: {
                    //是否启用导出模块。禁用该模块将会隐藏菜单按钮，但是 API 的导出相关方法还是可用的。 默认是：true.
                    enabled: false
                },
                credits: {
                    //是否显示版权信息 默认是：true.
                    enabled: false
                },
                xAxis: {
                    gridLineDashStyle: 'ShortDot',
                    gridLineWidth: 1, //纵向网格线宽度
                    type: 'datetime',
                    tickInterval: 24 * 36e5, // one day
                    labels: {
                        step: 4,//显示 n 的倍数标签，例如设置为 2 则表示标签间隔一个轴标签显示。
                        format: '{value: %m.%d}',
                        align: 'right',
                        rotation: -30
                    }
                },
                yAxis: {
                    lineWidth: 1,//轴线条宽度
                    gridLineDashStyle: 'ShortDot',
                    gridLineWidth: 1,//横向网格线宽度
                    title: {
                        text: ''//Y轴标题
                    },
                    labels: {
                        format: '{value}'
                    }
                },
                plotOptions: {
                    series: {
                        cursor: 'pointer',
                        label: {
                            connectorAllowed: false
                        },
                        // 针对所有数据列有效
                        lineWidth: 1,//线条粗细
                        marker: {
                            radius: 3,  //曲线点半径，默认是4
                        },
                        //当在数据列没有指定数据的 x 值时，该参数定义了数据点的起点，
                        //例如当数据列里的数据表示从 1945 年开始的数据，可以直接指定该参数为 1945。 默认是：0.
                        pointStart: 0,
                        //折点的间隔,当数据列里的数据点没有指定 x 值时，数据点间隔决定了 x 轴的间隔。 
                        //例如数据表示的是每隔十年的数据，那么可以指定数据间隔及 x 轴的开始值即可
                        pointInterval: 1,
                        //在时间轴中，该参数可以给 pointInterval 指定具体的间隔单位，包括 day、month 和 year。
                        pointIntervalUnit: "day",
                    }
                },
                tooltip: {
                    shared: true,  // 提示框是否共享
                    followPointer: true,
                    useHTML: true,
                    headerFormat: '',//关闭自动日期显示
                    // xDateFormat: '%Y年 %m月 %d日 %u',// %H:%M:%S
                    pointFormatter: function () {
                        let weekStr = "，";
                        let week = DateUtil.getWeekDay(this.x);
                        switch (week) {
                            case 1: weekStr += "星期一"; break;
                            case 2: weekStr += "星期二"; break;
                            case 3: weekStr += "星期三"; break;
                            case 4: weekStr += "星期四"; break;
                            case 5: weekStr += "星期五"; break;
                            case 6: weekStr += "星期六"; break;
                            case 7: weekStr += "星期日"; break;
                            default: break;
                        }
                        let integralNo = this.y;
                        integralNo = integralNo + "";
                        if (integralNo.length > 3) {
                            //格式化数字
                            integralNo = integralNo.replace(/\B(?=(?:\d{3})+\b)/g, ',');
                        }
                        //%Y年 %m月 %d日 %H:%M:%S
                        return '<div>' + Highcharts.dateFormat('%Y年 %m月 %d日', this.x) + weekStr + '</div>'
                            + '' + this.series.name + '： <strong> ' + integralNo + ' </strong> 个';
                    },
                    style: { // 文字内容相关样式
                        color: "#C8161D",
                        fontSize: "12px",
                        fontWeight: "blod",
                        fontFamily: "Courir new"
                    }
                },
                series: [
                    {
                        name: '宝豆奖励',
                        data: []//折点数据列表
                    },
                ],
                responsive: {//通过设定不同的响应规则来实现对图表在不同尺寸下的响应
                    rules: [{
                        condition: {
                            maxWidth: 500
                        },
                        chartOptions: {
                            legend: {
                                layout: 'horizontal',
                                align: 'center',
                                verticalAlign: 'bottom'
                            }
                        }
                    }]
                }
            }
        }
    },
    methods: {
        goBack() {
            this.$common.goBackUrl(this, RouteUrl.MY);//返回
        },
        //宝豆说明
        showDesc() {
            let msg = "通过推荐投保获取的宝豆<br>在保单生效后才能提现，<br>保单生效前的宝豆为待生效宝豆。";
            this.$vux.alert.show({
                title: "宝豆说明",
                hideOnBlur: true,//点击遮罩时自动关闭弹窗
                content: msg,
                onHide() { }
            });
        },
        //列表
        goList(showType) {
            let query = {
                showType: showType
            }
            this.$common.storeCommit(this, Mutations.SET_DATA_INTEGRAL, query);
            if (!this.user.isLogin) {
                this.$common.goUrl(this, RouteUrl.LOGIN);//需要登录
                return;
            }
            this.$common.goUrl(this, RouteUrl.INTEGRAL_IN_OR_OUT_LIST);//查看明细
        },
        //提现
        exChange() {
            if (!this.user.isLogin) {
                this.$common.goUrl(this, RouteUrl.LOGIN);//需要登录
                return;
            }
            let _this = this;
            //没有银行卡不可提现
            if (_this.$common.isEmpty(_this.user.userDto.banks) || _this.user.userDto.banks.length < 1) {
                _this.$vux.confirm.show({
                    content: _this.$common.alertMsg("请先绑定银行卡", "red;"), //显示内容
                    showInput: false, //是否显示input
                    confirmText: "确认",
                    cancelText: "取消",
                    onCancel() { ; },
                    onConfirm() { _this.$common.goUrl(_this, RouteUrl.MGT_BANKS); }
                });
                return;
            }
            this.$common.goUrl(this, RouteUrl.INTEGRAL_EXCHANGE);//提现

        },
        //动态设置X轴标签
        changeXAxis() {
            let year = parseInt(DateUtil.getNumNowYMD('Y'));
            let month = parseInt(DateUtil.getNumNowYMD('M'));
            let day = parseInt(DateUtil.getNumNowYMD('D'));
            //返回 1970 年 1 月 1 日 到指定日期的毫秒数
            this.chartsData.plotOptions.series.pointStart = Date.UTC(year, month - 2, day + 1);
            // console.log(year + "-" + month + "-" + day);
        },
        initChart() {
            let _this = this;
            if (!_this.integral.integralData.isEmpty) {//判断是否已查询到数据，因为本业加载和查询完都有调用该方法，防止重复渲染
                setTimeout(() => {
                    //动态设置折点数据
                    let year = DateUtil.getNumNowYMD('Y');
                    let month = parseInt(DateUtil.getNumNowYMD('M'));
                    // console.log("month=");
                    // console.log(month);
                    let day = parseInt(DateUtil.getNumNowYMD('D'));
                    //上月今天的后一天时间字符串，Date.UTC=返回 1970 年 1 月 1 日 到指定日期的毫秒数
                    let oldTimeStr = DateUtil.getDateStr_YmdhmsByTs(Date.UTC(year, month - 2, day + 1, 0, 0, 0, 0));
                    // console.log("oldTimeStr=");
                    // console.log(oldTimeStr);
                    //今天的时间字符串
                    let nowTimeStr = DateUtil.getDateStr_YmdhmsByTs(new Date().getTime());
                    // console.log("nowTimeStr=");
                    // console.log(nowTimeStr);
                    //两个日期相差天数
                    let monthDays = DateUtil.DateDiff(oldTimeStr, nowTimeStr) + 1;//+1表示包含上月的今天至今天
                    //遍历当月天数
                    let beansNo = 0;//宝豆量
                    _this.chartsData.series[0].data = [];//置空
                    for (let i = 0; i < monthDays; i++) {
                        let list = _this.integral.integralData.mouthList;
                        // let list = state.integral.mouthList;
                        if (_this.$common.isNotEmpty(list) && list.length > 0) {
                            for (let j = 0; j < list.length; j++) {
                                // let dataTimeStr = DateUtil.getDateStr_YmdByTs(list[j][0]);//时间戳获取日期字符串
                                let dataTimeStr = list[j][0];//时间戳获取日期字符串
                                let dayTime = Date.UTC(year, month - 2, day + 1 + i, 0, 0, 0, 0);//根据年月日获取某天的时间戳
                                let stepDayTimeStr = DateUtil.getDateStr_YmdByTs(dayTime);//上月当天至今某一天的时间字符串
                                if (dataTimeStr == stepDayTimeStr) {
                                    beansNo = list[j][1];//宝豆量
                                    break;
                                }
                            }
                        }
                        _this.chartsData.series[0].data.push(beansNo);
                        beansNo = 0;
                        // console.log("次数" + i);
                    }
                    // _this.changeData();//动态设置折点数据
                    _this.changeXAxis();//动态设置X轴标签
                    var chart = Highcharts.chart('container', _this.chartsData);
                }, 10);//延时加载解决其他页面返回时图标重新渲染的问题同时能读取VUEX数据
            }
        }
    },
    created() {
        if (!this.user.isLogin) {
            this.$common.goUrl(this, RouteUrl.LOGIN);//需要登录
            return;
        }
    },
    mounted() {
        document.title = this.pageTitle;
        this.$init.subPageInit(this);
        //查询页面数据
        let queryData = {
            _this: this,
            userCode: this.user.userDto.userCode,
        };
        this.$common.storeCommit(this, Mutations.MY_INTEGRAL, queryData);
        this.initChart();
    }
}
</script>

<style lang="scss" scoped>
.integral {
  width: 100%;
  height: 100vh;
  .page_head {
    div {
      color: white;
    }
    background-color: #c8161d;
  }
  .integral_head {
    height: 130px;
    padding: 10px;
    color: white;
    background-color: #c8161d;

    background-image: url("~assets/x3/ico/exchange_beans.jpg");
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;

    .head_left {
      position: relative;
      float: left;
      width: 45%;
      height: 100%;
      line-height: 40px;
      border-right: 1px solid white;
      text-align: center;
      .title {
        margin-top: 10%;
      }
      div {
        padding: 0px 10px 0px 0px;
        width: 70%;
        margin: 0px auto;
      }
      img {
        display: block;
        float: right;
        margin-top: 11px;
        margin-left: 5px;
      }
    }
    .head_right {
      position: relative;
      float: left;
      width: 43%;
      height: 100%;
      margin-left: 6%;
      .row {
        width: 130px;
        height: 30px;
        line-height: 30px;
        padding: 0px 5px;
        .money {
          height: 100%;
          float: left;
        }
        .rightTag {
          float: right;
          margin: 5px 10px 0px 0px;
        }
        .btn {
          float: right;
          width: 34px;
          height: 20px;
          line-height: 20px;
          margin-top: 4px;
          text-align: center;
          border: 1px solid white;
          font-size: 12px;
        }
      }
      .title {
        margin-top: 0%;
      }
    }
  }
  .integral_baodouNum {
    height: 50px;
    line-height: 50px;
    padding-left: 10px;
    background-color: white;
    margin-bottom: 10px;
    .left {
      width: 60%;
      float: left;
      color: dimgray;
      font-weight: bold;
    }
    .right {
      width: 35%;
      float: right;
      text-align: right;
      padding-right: 10px;
      color: #c8161d;
      font-weight: bold;
    }
  }
  .integral_statistics {
    margin-bottom: 10px;
    text-align: center;
    background-color: white;
    .weui-grid {
      color: gray;
      h3 {
        color: #c8161d;
      }
      div {
        font-size: 12px;
      }
    }
  }
  .integral_chartTitle {
    height: 50px;
    line-height: 60px;
    padding-left: 50px;
    font-weight: bold;
    color: dimgray;
    background-color: white;
  }
  .integral_chart {
    position: relative;
    width: 100%;
    height: auto;
    background-color: white;
  }
}
</style>

